{%extends file='layout/layout.html' %}
{%block name="content"%}
<div class="forms">
    <ul>
        <li>
            <label class="desc">
                服装名称
            </label>
            <div>
                <input type="text" name="clothing_name" value="{%$clothing_name|default:''%}" tabindex="1"
                       style="width:220px" class="field text small">

            </div>
        </li>
        <li>
            <label class="desc">
                适合年龄<font color="red">(*仅输入数字)</font>
            </label>
            <div>
                <input type="text" name="minage" value="{%$minage|default:''%}" tabindex="1" style="width:100px"
                       class="field text small">
                ~
                <input type="text" name="maxage" value="{%$maxage|default:''%}" tabindex="1" style="width: 100px"
                       class="field text small">

            </div>
        </li>
        <li>
            <label class="desc">
                活动时间
            </label>
            <div>
                <input type="text" name="starttime" value="{%$starttime|date_format:'%Y-%m-%d'|default:''%}" readonly
                       tabindex="1" style="width:100px" class="field text small datepicker">
                ~
                <input type="text" name="endtime" value="{%$endtime|date_format:'%Y-%m-%d'|default:''%}" readonly tabindex="1"
                       style="width: 100px" class="field text small datepicker">

            </div>
        </li>
        <li>
            <label class="desc">
                积分兑换<font color="red">(*仅输入数字)</font>
            </label>
            <div>
                <input type="text" name="integral" tabindex="1" value="{%$integral|default:''%}"
                       style="width:220px" class="field text small">
            </div>
        </li>
        <li>
            <label class="desc">
                库存<font color="red">(*仅输入数字)</font>
            </label>
            <div>
                <input type="text" name="num" tabindex="1" value="{%$num|default:''%}"
                       style="width:220px" class="field text small">
            </div>
        </li>
        <li>
            <label class="desc">
                活动封面
            </label>
            <div>

                <label for="mediabtn" class="btn btn-success btn-sm"><i class="fa fa-file-image-o"></i>上传图片</label>
                <input onchange="showimg(this)" type="file" id="mediabtn" style="display: none" name="media" tabindex="1" class="field text small">
                <div>{%if $pic|default:''%}<img src="/upload/{%$pic%}" width="300"/>{%/if%}</div>
            </div>
        </li>
        <li >
            <label class="desc">
                颜色
            </label>
            <div>
                <div id="colorlist">
                {%if $color|@count neq 0 %}
                {%foreach $color as $colorkey=>$colorvalue%}
                    <div style='margin-bottom: 10px'><input class="color" type='text' value="{%$colorvalue.colorname%}"> <a onclick='rmcolor(this)' style='cursor: pointer'><i class='fa fa-remove'></i></a></div>
                {%/foreach%}
                {%/if%}
                </div>

                <label class="btn btn-sm btn-success" onclick="addcolor()"><i class="fa fa-plus"></i>添加颜色</label>
            </div>
        </li>
        <li >
            <label class="desc">
                尺寸
            </label>
            <div>
                <div id="sizelist">
                {%if $size|@count neq 0 %}
                {%foreach $size as $sizekey=>$sizevalue%}
                    <div style='margin-bottom: 10px'><input class="size"  type='text' value="{%$sizevalue.sizename%}"> <a onclick='rmsize(this)' style='cursor: pointer'><i class='fa fa-remove'></i></a></div>
                {%/foreach%}
                {%/if%}
                </div>
                <label class="btn btn-sm btn-success" onclick="addsize()"><i class="fa fa-plus"></i>添加尺寸</label>

            </div>
        </li>
        <li>
            <label class="desc">
                备注
            </label>
            <div>
                <textarea  tabindex="2" cols="50" rows="5"  style="resize:none;width:220px"  class="field textarea small" id="rank">{%$rank|default:''%}</textarea>
            </div>
        </li>
        <li>
            <label class="desc">
                淘口令
            </label>
            <div>
                <input type="text" name="tkcode" tabindex="1" value="{%$tkcode|default:''%}" style="width:220px" class="field text small">
            </div>
        </li>
        <li >
            <label class="desc">
                内容
            </label>
            <div style="width: 50%">
                <div  id="content" name="content">
                    {%$content|default:''%}
                </div>
            </div>
        </li>


        <li class="buttons">
            <input id="btn_sub" type="button" value="保存" class="submit" onclick="dofrom()">
            <input type="hidden" name="tk_name" value="{%$tk_name%}"/>
            <input type="hidden" name="tk_value" value="{%$tk_value%}"/>
            <input type="button" value="返回" class="submit" onclick="goback('/admin/clothing')">
        </li>
    </ul>
</div>


{%/block%}
{%block name="js" append%}

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#content');
    editor.customConfig.zIndex = 100;
    // 隐藏“网络图片”tab
    editor.customConfig.showLinkImg = false;
    editor.customConfig.uploadFileName = 'filedata';
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/api/uploadfile.json';
    // 限制一次最多上传 5 张图片
    editor.customConfig.uploadImgMaxLength = 1;
    $(function () {

        editor.create();
        $(".datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            showOtherMonths: true,
            selectOtherMonths: true,
            showButtonPanel: true,
            showOn: "both",
            buttonImageOnly: true,
            buttonText: "",
            changeMonth: true,
            changeYear: true
        });


    })

    function dofrom() {
        var tk_name = $("input[name='tk_name']").val();
        var tk_value = $("input[name='tk_value']").val();
        var clothing_name = $("input[name='clothing_name']").val();
        var minage = $("input[name='minage']").val();
        var maxage = $("input[name='maxage']").val();
        var starttime = $("input[name='starttime']").val();
        var endtime = $("input[name='endtime']").val();
        var integral = $("input[name='integral']").val();
        var num = $("input[name='num']").val();
        var rank = $("#rank").val();
        var tkcode = $("input[name='tkcode']").val();;
        var content=editor.txt.html();


        var color=[];
        $(".color").each(function (ck,cv) {

            if(isNull(cv.value)){
                color.push($.trim(cv.value))
            }
        })

        var size=[];
        $(".size").each(function (sk,sv) {
            if(isNull(sv.value)){
                size.push($.trim(sv.value))
            }
        })


        if (!isNull(clothing_name)) {
            showmsg('服装名称不能为空', 2);
            return false;
        }
        if (!isDigits(minage) || !isDigits(maxage)) {
            showmsg('适合年龄错误', 2);
            return false;
        }
        if (!isNull(starttime) || !isNull(endtime)) {
            showmsg('活动时间错误', 2);
            return false;
        }
        if (!isDigits(integral)) {
            showmsg('积分格式错误', 2);
            return false;
        }
        if (!isDigits(num) ) {
            showmsg('库存格式错误', 2);
            return false;
        }
        if (!isNull(rank) ) {
            showmsg('备注不能为空', 2);
            return false;
        }


        var xhr = new XMLHttpRequest();
        var fdata = new FormData();
        fdata.append('tk_name', tk_name);
        fdata.append('tk_value', tk_value);
        fdata.append('cid', {%$id|default:0%});
        fdata.append('clothing_name', clothing_name);
        fdata.append('minage', minage);
        fdata.append('maxage', maxage);
        fdata.append('starttime', starttime);
        fdata.append('endtime', endtime);
        fdata.append('integral', integral);
        fdata.append('num', num);
        fdata.append('rank', rank);
        fdata.append('tkcode', tkcode);
        fdata.append('media', $("input[name='media']")[0].files[0]);
        if(color.length>0){
            fdata.append('color', color.join('|'));
        }
        if(size.length>0){
            fdata.append('size', size.join('|'));
        }


        fdata.append('content', filterXSS(content));

        xhr.open('POST', "/api/createclothing.json", true);
        xhr.send(fdata);
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4){
                if (xhr.status == 200) {
                    showmsg(xhr.responseText, 1);
                } else {
                    showmsg(xhr.responseText, 4);
                }
                dorefulsh();
            }

        }

    }
    function  showimg(obj) {
        var files = obj.files[0];
        var imgtype=['jpg', 'png', 'jpeg','JPG','PNG','image/jpeg','image/png'];
        if (imgtype.indexOf(files.type) < 0) {
            showmsg('图片格式不正确', 2);
            return false;
        }else{
            var reader = new FileReader();
            reader.readAsDataURL(files);
            reader.onload = function(e) {
                obj.nextElementSibling.innerHTML='<img width="300" src="'+this.result+'" />';

            }
        }


    }
    function addcolor() {
        var color="<div style='margin-bottom: 10px'><input class='color' type='text' > <a onclick='rmcolor(this)' style='cursor: pointer'><i class='fa fa-remove'></i></a></div>"
        $("#colorlist").append(color);
    }
    function rmcolor(obj) {
        obj.parentNode.remove();
    }
    function addsize() {
        var color="<div style='margin-bottom: 10px'><input class='size' type='text' > <a onclick='rmsize(this)' style='cursor: pointer'><i class='fa fa-remove'></i></a></div>"
        $("#sizelist").append(color);
    }
    function rmsize(obj) {
        obj.parentNode.remove();
    }

</script>
{%/block%}

